<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 500px;
            text-align: center;
        }

        .grid table {
            width: 100%;
            border-collapse: collapse;
        }

        .grid th,
        td {
            padding: 10;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: orange;
        }

        .titleBox {
            text-align: center;
            margin: 20px auto;
        }

        button {
            background-color: lightgreen;
        }
    </style>


</head>

<body>
    <div id="app">

        <div class="titleBox">
            <input type="text" placeholder="书名" >
            <button>点击添加</button>
        </div>

        <div class="grid">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                      
                        <td>
                            <a href="#" @click.prevent>修改</a>
                            <span>|</span>
                            <a href="#">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        /*
          图书管理-图书列表展示功能
          注意事项：<a href="" @click.prevent>修改</a>
          事件绑定时，可以只添加修饰符，而不绑定事件函数
        */

      
       
    </script>
</body>

</html>